<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="person">
        <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
        <h2>游戏列表：</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
            3.5. 【ref 创建：对象类型的响应式数据】
            其实 ref 接收的数据可以是：基本类型、对象类型。
            若 ref 接收的是对象类型，内部其实也是调用了 reactive 函数。
        </ul>
        <h2>测试：{{ obj.a.b.c.d }}</h2>
        <button @click="changeCarPrice">修改汽车价格</button>
        <button @click="changeFirstGame">修改第一游戏</button>
        <button @click="test">测试</button>
    </div>
</template>
<script lang="ts" setup name="Person">
import { reactive } from 'vue'
// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
    { id: 'ahsgdyfa01', name: '英雄联盟' },
    { id: 'ahsgdyfa02', name: '王者荣耀' },
    { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
    a: {
        b: {
            c: {
                d: 666
            }
        }
    }
})
function changeCarPrice() {
    car.price += 10
}
function changeFirstGame() {
    games[0].name = '流星蝴蝶剑'
}
function test() {
    obj.a.b.c.d = 999
}
</script>